<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<form id="fillDataForm" autocomplete="off" action="createCard-preview.htm" method="POST" enctype="multipart/form-data" onsubmit="return validateFillDataForm()">
<s:include value="cardCreateBeanInclude.jsp" />
<table width="722" border="0" cellpadding="0" cellspacing="0" class="bg2">
	<tr>
		<td width="100%" valign="top">
			<table width="100%" height="40" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td class="font02">ขั้นตอนที่ 2 กรอกรายละเอียดและรูปภาพ</td>
				</tr>
			</table>
			<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="font03">
				<tr>
					<td>1. กรุณากรอกข้อมูลสำหรับนามบัตรของท่านทั้งเวอร์ชั่นไทย และเวอร์ชั่นอังกฤษ ให้ครบถ้วน</td>
				</tr>
				<tr>
					<td>2. สำหรับนามบัตรที่มีรูปภาพกรุณาใส่รูปภาพถ่ายของท่าน(ภาพต้องชัดเจน)ที่กำหนดไว้ด้านล่าง</td>
				</tr>
				<tr>
					<td>3. คลิกปุ่ม ขั้นตอนต่อไปเพื่อดำเนินการในขั้นตอนต่อไป</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
			</table>
			<%--
			<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
				<tr>
					<td width="50%">&nbsp;</td>
					<td width="50%" align="right">
						<a href="createCard-pickTemplate.htm?stepBack=Y"
							onMouseOut="MM_swapImgRestore()"
							onMouseOver="MM_swapImage('Image2','','${ request.imageBase }/b_back2.gif',1)">
							<img src="${ request.imageBase }/b_back1.gif" title="ย้อนกลับเพื่อแก้ไข" width="126" height="33" id="Image2">
						</a>
						<input type="image" 
							onmouseout="MM_swapImgRestore()" 
							onmouseover="MM_swapImage('Image3','','${ request.imageBase }/b_next2.gif',1)"
							src="${ request.imageBase }/b_next1.gif" 
							value="ขั้นตอนต่อไป"
							width="126"
							height="33"
							id="Image3"/>
					</td>
				</tr>
			</table>
			 --%>
		</td>
	</tr>
	<tr>
		<td height="236">
			<table width="100%" height="236" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<s:if test='%{ cardCreateBean.printType eq "0" or cardCreateBean.printType eq "2"}'>
					<td width="50%" valign="top">
						<table width="315" height="30" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr>
								<td class="font01">ใส่ข้อมูล <span class="font05_2">ภาษาไทย</span>
									ให้ครบถ้วนทุกช่อง</td>
							</tr>
						</table>
						<table id="oInfoTh" width="315" height="162" border="0" align="center" cellpadding="1" cellspacing="0">
							<tr>
								<td width="80px" class="font05">ชื่อ<font color="red">*</font></td>
								<td>
									<label for="fname"></label>
									<s:textfield name="cardCreateBean.order.masterMember.mmbFnameTh" cssClass="form_user_pass" id="fname"/>
								</td>
							</tr>
							<tr>
								<td class="font05">นามสกุล<font color="red">*</font></td>
								<td>
									<label for="lname"></label>
									<s:textfield name="cardCreateBean.order.masterMember.mmbLnameTh" cssClass="form_user_pass" id="lname"/>
								</td>
							</tr>
							<tr>
								<td class="font05">ตำแหน่ง<font color="red">*</font></td>
								<td>
									<label for="position"></label> 
									<s:textfield name="cardCreateBean.order.masterMember.mmbPositionTh" cssClass="form_user_pass" id="position"/>
								</td>
							</tr>
							<%-- 
							<s:if test="%{ cardCreateBean.order.mtgId eq 1}">
							<tr>
								<td class="font05">ส่วนงาน<font color="red">*</font></td>
								<td><label for="department"></label> 
									<s:textfield name="cardCreateBean.order.masterMember.mmbDeptTh" cssClass="form_user_pass" id="department"/>
								</td>
							</tr>
							</s:if>
							--%>
							
							<!-- ตัวแทนเท่านั้น -->
							<tr id="tr-office-name-th">
								<td class="font05">ชื่อสํานักงาน<font color="red">*</font></td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbOfficeNameTh" cssClass="form_user_pass" id="mmbOfficeNameTh"/></td>
							</tr>
							<tr id="tr-office-addr-th1">
								<td class="font05">ที่อยู่สํานักงาน<font color="red">*</font></td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbOfficeAddrTh" cssClass="form_user_pass" id="mmbOfficeAddrTh"/></td>
							</tr>
							<tr id="tr-office-addr-th2">
								<td class="font05">&nbsp;</td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbOfficeAddr2Th" cssClass="form_user_pass" id="mmbOfficeAddr2Th"/></td>
							</tr>
							
							<!-- ================= -->
							<s:if test="%{ cardCreateBean.order.mtgId eq 1}">
							<tr>
								<label for="mmbAgentCode"></label>
								<td class="font05">รหัสตัวแทน<font color="red">*</font></td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbAgentCode" cssClass="form_user_pass" id="mmbAgentCode"/></td>
							</tr>
							</s:if>
							<s:if test="%{ cardCreateBean.order.mtgId eq 2}">
							<tr>
								<td class="font05">สังกัดหน่วยงาน
								<font color="red">*</font></td>
								<td><label for="department"></label> 
									<s:textfield name="cardCreateBean.order.masterMember.mmbDeptTh" cssClass="form_user_pass" id="department"/>
								</td>
							</tr>
							</s:if>
							<!-- ================= -->
							
							<tr>
								<td class="font05">Email<s:if test="%{ cardCreateBean.order.mtgId eq 2}"><font color="red">*</font></s:if></td>
								<td>
									<label for="email"></label> 
									<s:textfield name="cardCreateBean.order.masterMember.mmbEmail" cssClass="form_user_pass" id="email"/>
								</td>
							</tr>
							</tr>
								<td class="font05">&nbsp;</td>
								<td>
									<s:textfield name="cardCreateBean.order.masterMember.mmbEmail2" cssClass="form_user_pass" id="email2"/>
								</td>
							</tr>
							<tr>
								<td class="font05">เบอร์โทรศัพท์</td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbPhone" cssClass="form_user_pass" id="mmbPhone"/></td>
							</tr>
							<tr>
								<td class="font05">&nbsp;</td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbPhone2" cssClass="form_user_pass" id="mmbPhone2"/></td>
							</tr>
							<tr>
								<td class="font05">เบอร์แฟกซ์</td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbFax" cssClass="form_user_pass" id="mmbFax"/></td>
							</tr>
							<tr>
								<td class="font05">&nbsp;</td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbFax2" cssClass="form_user_pass" id="mmbFax2"/></td>
							</tr>
							<tr>
								<td class="font05">เบอร์มือถือ</td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbMobile" cssClass="form_user_pass" id="mmbMobile"/></td>
							</tr>
							<tr>
								<td class="font05">&nbsp;</td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbMobile2" cssClass="form_user_pass" id="mmbMobile2"/></td>
							</tr>
							
						</table>
					</td>
					</s:if>
					<s:if test='%{ cardCreateBean.printType eq "0"}'>
					<td width="50%" valign="top">
					</td>
					</s:if>
					<s:if test='%{ cardCreateBean.printType eq "1" or cardCreateBean.printType eq "2"}'>
					<td width="50%" valign="top">
						<table width="315" height="30" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr>
								<td class="font01">ใส่ข้อมูล <span class="font05_2">ภาษาอังกฤษ</span>
									ให้ครบถ้วนทุกช่อง</td>
							</tr>
						</table>
						<table width="315" border="0" align="center" cellpadding="1" cellspacing="0">
							<tr>
								<td width="70" class="font05">Name<font color="red">*</font></td>
								<td>
									<s:textfield name="cardCreateBean.order.masterMember.mmbFnameEn" cssClass="form_user_pass" id="fnameEn"/>
								</td>
							</tr>
							<tr>
								<td class="font05">Surname<font color="red">*</font></td>
								<td>
									<s:textfield name="cardCreateBean.order.masterMember.mmbLnameEn" cssClass="form_user_pass" id="lnameEn"/>
								</td>
							</tr>
							<tr>
								<td class="font05">Position<font color="red">*</font></td>
								<td>
									<s:textfield name="cardCreateBean.order.masterMember.mmbPositionEn" cssClass="form_user_pass" id="positionEn"/>
								</td>
							</tr>
							<s:if test="%{ cardCreateBean.order.mtgId eq 2}">
							<tr>
								<td class="font05">Dept<font color="red">*</font></td>
								<td>
									<s:textfield name="cardCreateBean.order.masterMember.mmbDeptEn" cssClass="form_user_pass" id="departmentEn"/>
								</td>
							</tr>
							</s:if>
							<tr id="tr-office-name-en">
								<td class="font05">Office Name<font color="red">*</font></td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbOfficeNameEn" cssClass="form_user_pass" id="mmbOfficeNameEn"/></td>
							</tr>
							<tr id="tr-office-addr-en1">
								<td class="font05">Office Address<font color="red">*</font></td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbOfficeAddrEn" cssClass="form_user_pass" id="mmbOfficeAddrEn"/></td>
							</tr>
							<tr id="tr-office-addr-en2">
								<td class="font05">&nbsp;</td>
								<td><s:textfield name="cardCreateBean.order.masterMember.mmbOfficeAddr2En" cssClass="form_user_pass" id="mmbOfficeAddr2En"/></td>
							</tr>
							
							<s:if test='%{ cardCreateBean.printType neq "0" and cardCreateBean.printType neq "2"}'>
							<tr>
								<td class="font05">Email<font color="red">*</font></td>
								<td>
									<label for="email"></label> 
									<s:textfield name="cardCreateBean.order.masterMember.mmbEmail" cssClass="form_user_pass" id="email"/>
								</td>
							</tr>
							</s:if>
							<s:else>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							</s:else>
						</table>
					</td>
					</s:if>
					<s:if test='%{ cardCreateBean.printType eq "1"}'>
					<td width="50%" valign="top">
					</td>
					</s:if>
				</tr>
			</table>
			<table width="95%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td width="50%">
					<s:if test='cardCreateBean.order.masterTemplate.mtpImgRequired eq "Y"'>
						<table width="315" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr>
								<td width="129" class="font05">สามารถคลิกที่รูปภาพ	เพื่อเปลี่ยนรูปได้</td>
								<td width="186" align="center" class="font05">
									<s:set id="pictureFileName" value="cardCreateBean.order.masterMember.mmbPicturePath"/>
									<s:if test='%{#pictureFileName eq null or #pictureFileName eq ""}'>
									<input type="image" src="${requestScope.imageBase }/avatar/Default_Avatar.jpg" height="100" alt="คลิ๊กเพื่อเปลี่ยนรูป" onclick="doChangeImage()"/>
									</s:if>
									<s:else>
									<s:hidden name="cardCreateBean.order.masterMember.mmbPicturePath" id="mmbPicturePath"/>
									<s:url id="imageUrl" value="%{'images/image.htm'}" escapeAmp="false">
										<s:param name='name' value='%{cardCreateBean.order.masterMember.mmbPicturePath}' />
										<s:param name='isTemp' value='%{"Y"}' />
										<s:param name="timestamp" value="%{(new java.util.Date()).getTime()}"/>
									</s:url>
									<input type="image" src="<s:property value="#imageUrl" />" height="100" alt="คลิ๊กเพื่อเปลี่ยนรูป" onclick="doChangeImage()"/>
									</s:else>
								</td>
							</tr>
						</table>
					</s:if>
					</td>
					<td width="50%" align="right">
						<a href="createCard-pickTemplate.htm?stepBack=Y"
							onMouseOut="MM_swapImgRestore()"
							onMouseOver="MM_swapImage('Image2','','${ request.imageBase }/b_back2.gif',1)">
							<img src="${ request.imageBase }/b_back1.gif" title="ย้อนกลับเพื่อแก้ไข" width="126" height="33" id="Image2">
						</a>
						<input type="image" 
							onmouseout="MM_swapImgRestore()" 
							onmouseover="MM_swapImage('Image3','','${ request.imageBase }/b_next2.gif',1)"
							src="${ request.imageBase }/b_next1.gif" 
							value="ขั้นตอนต่อไป"
							width="126"
							height="33"
							id="Image3"/>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</form>
<script language="javascript">
function doChangeImage(){
	$j("#fillDataForm").attr("action", "createCard-changeImage.htm");
}
function doClickOnePage(checked){
	if(checked){
		$j("#fillDataEn").hide();
	} else {
		$j("#fillDataEn").show();
	}
}
function doClickHasDept(checked){
	if(checked){
		$j("#fillDataDeptTh").show();
		$j("#fillDataDeptEn").show();
		$j("#fillDataDeptThHide").hide();
		$j("#fillDataDeptEnHide").hide();
	} else {
		$j("#fillDataDeptTh").hide();
		$j("#fillDataDeptEn").hide();
		$j("#fillDataDeptThHide").show();
		$j("#fillDataDeptEnHide").show();
	}
}
function validateFillDataForm(){
		if($j("#fillDataForm").attr("action")!="createCard-preview.htm") return true;
		var hasDept = $j("#checkHasDept").attr("checked");

		var mtgId = $j('#mtgId').val();
		
		var rules=new Array();
		i=0;
    rules[i] = 'fname:ชื่อ|required';i++;
    rules[i] = 'lname:นามสกุล|required';i++;
    rules[i] = 'position:ตำแหน่ง|required';i++;
    if(hasDept) rules[i] = 'department:ส่วนงาน|required';i++;

    //Agent
    if(mtgId==1) 
    {
        rules[i] = 'mmbOfficeNameTh:ชื่อสำนักงาน|required';i++;
        rules[i] = 'mmbOfficeAddrTh:ที่อยู่สำนักงาน|required';i++;
        rules[i] = 'mmbAgentCode:รหัสตัวแทน|required';i++;
    }else if(mtgId==2){
    	rules[i] = 'department:สังกัดหน่วยงาน|required';i++;
    	rules[i] = 'email:Email|required';i++;
    }
    
    if(!$j("#checkOnePageFlag").attr("checked")){
	    rules[i] = 'fnameEn:Name|required';i++;
	    rules[i] = 'lnameEn:Surname|required';i++;
	    rules[i] = 'positionEn:Position|required';i++;
	    //if(hasDept) rules[i] = 'departmentEn:Dept|required';i++;
    }

		//Agent
    if(mtgId==1) 
    {
    	rules[i] = 'mmbOfficeNameEn:Office Name|required';i++;
      rules[i] = 'mmbOfficeAddrEn:Office Address|required';i++;
    }
    if(mtgId==2){
    	rules[i] = 'departmentEn:Dept|required';i++;
    }
    
    if (yav.performCheck('fillDataForm', rules, 'classic')){
   		return true;
    }
    
	return false;
}
function doFillDataForm()
{
   	if (validateFillDataForm())
   	{
    	$j("#fillDataForm").submit();
    }
}
$j(document).ready(function(){
	$j("#checkOnePageFlag").attr("checked", false);
	$j("#checkHasDept").attr("checked", false);
	$j("#fillDataDeptTh").hide();
	$j("#fillDataDeptEn").hide();
	$j("#fillDataDeptThHide").show();
	$j("#fillDataDeptEnHide").show();
	
	//hidding
	$j("#checkHasDept").attr("checked", true);
	$j("#fillDataDeptTh").show();
	$j("#fillDataDeptEn").show();
	$j("#fillDataDeptThHide").hide();
	$j("#fillDataDeptEnHide").hide();

	//test();
	
	if($j('#mtgId').val()==2){
		$j('#tr-office-name-th').css('display','none');
		$j('#tr-office-addr-th1').css('display','none');
		$j('#tr-office-addr-th2').css('display','none');
		$j('#tr-office-name-en').css('display','none');
		$j('#tr-office-addr-en1').css('display','none');
		$j('#tr-office-addr-en2').css('display','none');
	}
	
});

function test(){
	//for test
	$j("#fname").val("กิตติพงษ์");
	$j("#lname").val("สุพรรณ์");
	$j("#position").val("เจ้าหน้าที่อาวุโส");
	$j("#department").val("mfec");

	$j("#email").val("email@gmail.com");
	$j("#email2").val("email2@gmail.com");
	$j("#mmbAgentCode").val("0120001");
	$j("#mmbOfficeNameTh").val("สำนักเส้าหลิน");
	$j("#mmbOfficeAddrTh").val("111/1 ถ.เส้าหลิน ซ.เส้าจัง อ.เมือง");
	$j("#mmbOfficeAddr2Th").val("จ.กรุงเทพ 10900");
	$j("#mmbPhone").val("023201002");
	$j("#mmbPhone2").val("028948772");
	$j("#mmbFax").val("022349873");
	$j("#mmbFax2").val("023299923");
	$j("#mmbMobile").val("0843782617");
	$j("#mmbMobile2").val("0842237786");
	
	$j("#fnameEn").val("Lueng");
	$j("#lnameEn").val("Dum-on");
	$j("#positionEn").val("Lie down playing officer");
	//$j("#departmentEn").val("Lie down");
	
	$j("#email").val("wirojsin@verisette.com");
	$j("#mmbOfficeNameEn").val("Mittare Public Company Ltd. ");
	$j("#mmbOfficeAddrEn").val("111/1 vibhavadee rangsit rd. Ladyao ");
	$j("#mmbOfficeAddr2En").val("Jatujak Bangkok 10900");
	
}
</script>